import React, { useState } from 'react'
import styled from 'styled-components'

import {login} from '../Network'


const LoginBox = styled.div`
  background: #FFFFFF;
  border-radius: 16px;
  width: 420px;
  height: 380px;
`

const Head = styled.div`
  height: 64px;
  width: 100%;
  color: gray;
  font-size: 1.6rem;
  text-align: center;
`

const InputWrapper = styled.div`
  background: white;
  border: 1px solid #70C3BB;
  border-radius: 22px;
  height: 44px;
  width: 90%;
  font-size: 1.2rem;
  margin: auto;
  margin-top: 20px;
  padding: auto;
  display: flex;
`
const LoginInput = styled.input`
  display: block;
  width: 86%;
  height: 76%;
  margin: auto;
  text-align: right;
  font-size: 1.2rem;
  border: 0px;
  outline: none;
`

const AgreenBox = styled.div`
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  width: 86%;
  margin: auto;
  margin-top: 44px;
`

const AgreenCheck = styled.input`
  display: block;
`

const Link = styled.a`
  color: #70C3BB;
`

const LoginButton = styled.button`
  display: block;
  border-radius: 24px;
  background: #70C3BB;
  border: 1px solid #70C300;
  height: 56px;
  width: 92%;
  margin: auto;
  margin-top: 16px;
  text-align: center;
  font-size: 2rem;
  color: #FFFFFF;
`

export default function Auth(props) {

  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const [agreen, setAgreen] = useState(false)

  function handleUsername(event) {
    setUsername(event.target.value)
  }

  function handlePassword(event) {
    setPassword(event.target.value)
  }

  function handleAgreen(event) {
    setAgreen(event.target.checked)
  }

  function handleLogin(event) {

    event.preventDefault();
    console.log('The link was clicked.' + event);
    console.log("登录 username:" + username + "   password:" + password + " agreen:" + agreen)

    let loginForm = {
      'username': username,
      'password': password
    }
    console.log(loginForm)

    login(loginForm).then((data) => {

      console.log(data)
      
      window.localStorage.setItem("token", data["token"])

      window.localStorage.setItem("username", data["user"]['username'] )

    })

  }

  return (
    <div className="flex justify-center items-center w-screen h-screen bg-auth-login bg-cover bg-purple-50">
      <LoginBox className="border-2 border-gray-100">
        <Head>
          <p>欢迎登录</p>
        </Head>

        <form onSubmit={handleLogin}>

          <InputWrapper>
            <LoginInput value={username} onChange={handleUsername} placeholder="username"/>
          </InputWrapper>
          
          <InputWrapper>
            <LoginInput value={password} onChange={handlePassword} type="password" placeholder="password"/>
          </InputWrapper>

          <AgreenBox>
            <AgreenCheck value={agreen} onChange={handleAgreen} type="checkbox" />
            <div>
              <p><span>我同意</span> <Link href="http://helapu.com">服务协议</Link> <span>、</span> <Link href="http://helapu.com">隐私政策</Link> <span>、</span> <Link href="http://helapu.com">儿童保护协议</Link></p>
            </div>
                        
          </AgreenBox>

          <LoginButton type="submit">
            登  录
          </LoginButton>

          <div className='ml-8 h-20'>
            <a href="/chat/chat_list/world">Go Chat</a>
          </div>

        </form>        
        
      </LoginBox>
    </div>

  )
  
}
